<template>
	<s-layout title="商品管理" tabbar="/manage/pages/goods/index" :showLeftBtn="false">
		<su-sticky bgColor="#fff">
			<uni-search-bar placeholder="搜索关键字" radius="27" @confirm="search" @cancel="cancel" />
			<su-tabs :list="state.tabs" lineColor="#3A43FF" :scrollable="false" @change="changeTab"
				:current="state.activeTab"></su-tabs>
		</su-sticky>
		<view class="content">
			<view class="card" v-for="item in state.list" :key="item.id">
				<view class="goods-box">
					<img  :src="sheep.$url.cdn(item.image)" alt="" class="goods-img" />
					<view class="info">
						<view class="title">
							{{item.title}}
						</view>
						<view>
							规格：{{item.grid}}
						</view>
						<view class="price">
							￥{{item.price}}
						</view>
					</view>
				</view>
				<view class="more-btn">
					<view class="" @tap="deleteGoods(item.id)">
						删除
					</view>
					<view class="" @tap="downGoods(item.id, item.status)">
						{{item.status === 'up' ? '下架' : '上架'}}
					</view>
					<view class="shipping" @tap="editProduct(item)">
						编辑
					</view>
				</view>
			</view>
		</view>

		<uni-load-more v-if="state.list.length > 0" :status="state.loadStatus" :content-text="{
		    contentdown: '上拉加载更多',
		  }" @tap="loadmore" />
		<s-empty v-if="state.list.length === 0" icon="/static/soldout-empty.png" text="暂无商品">
		</s-empty>

		<view class="add-btn">
			<button class="ss-reset-button" @tap="toAddGoods">
				<uni-icons type="plusempty" size="20" color="#fff"/>
			</button>
		</view>
	</s-layout>
</template>
<script setup>
	import {
		reactive
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReachBottom
	} from "@dcloudio/uni-app"
	import sheep from '@/sheep';
	const state = reactive({
		keyword: "",
		activeTab: 0,
		tabs: [{
			name: '出售中',
		}, {
			name: '未上架',
		}],
		list: [],
		page: 1,
		pageSize: 20,
		loadStatus: 'noMore',
	})

	function toAddGoods(){
		sheep.$router.go('/manage/pages/goods/add')
	}

	function search(e) {
		state.keyword = e.value;
		emptyList();
		getList();
	}
    
    function cancel() {
        state.keyword = '';
        emptyList();
        getList();
    }

	function changeTab(value) {
		state.activeTab = value.index;
		emptyList();
		getList();
	}
	/**
	 * @商品编辑
	 */
    function editProduct(item){
		 console.log(item,'100');
		 let a = JSON.parse(JSON.stringify(item))
		 a.image_wh = JSON.parse(a.image_wh)
		 // sheep.$router.go('/manage/pages/goods/add?productInfo=' + JSON.stringify(a ))
		 sheep.$router.go('/manage/pages/goods/add?id=' + a.id)
	 }
    async function deleteGoods(id) {
        const res = await sheep.$api.material.delGoods({id});
        if(res.code === 1){
          uni.showToast({
            title: '删除成功',
            icon: 'success'
          });
          emptyList();
          getList();
        }
    }
    
    async function downGoods(id, status) {
        const str = status === 'up' ? 'down' : 'up'
        const res = await sheep.$api.material.updateGoods({id, status: str});
        if(res.code === 1){
          uni.showToast({
            title: status === 'up' ? '下架成功' : '上架成功',
            icon: 'success'
          });
          emptyList();
          getList();
        }
    }

	async function getList() {
		// const obj = {
		// 	id: 1,
		// 	image: "https://img01.yzcdn.cn/vant/cat.jpeg",
		// 	title: "商品商品",
		// 	grid: "2公斤/箱",
		// 	price: 88
		// }
		// let arr = []
		// for (var index = 0; index < 12; index++) {
		// 	arr.push(obj)
		// }
		// state.list = arr
		// return
		state.loadStatus = 'loading';
        const flag = state.activeTab == 0 ? 'up' : 'down'
		const info = {
			keyword: state.keyword,
			p: state.page,
			pagesize: state.pageSize,
            status: flag
		}
		const res = await sheep.$api.material.goodsListNoUser(info);
		if (res.code === 1) {
			let newArr = res.data
			let initArr = state.list ? state.list : []
			const lastListNum = newArr.length
			if (state.page == 1) {
				state.list = res.data
			} else {
				state.list = initArr.concat(newArr)
			}
			if (lastListNum < state.pageSize) {
				state.loadStatus = 'noMore';
			} else {
				state.loadStatus = 'more';
			}
		}
	}

	function emptyList() {
		state.page = 1;
		state.list = [];
		state.loadStatus = 'noMore';
	}

	// 加载更多
	function loadmore() {
		if (state.loadStatus !== 'noMore') {
			state.page++;
			getList();
		}
	}

	// 上拉加载更多
	onReachBottom(() => {
		loadmore();
	});
	
	onShow((options) => {
		getList();
	});
</script>

<style lang="scss" scoped>
	.content {
		padding: 28rpx;
	}

	.card {
		background-color: #fff;
		border-radius: 24rpx;
		padding: 28rpx;
		margin-bottom: 24rpx;
	}

	.goods-box {
		display: flex;

		.goods-img {
			width: 156rpx;
			height: 156rpx;
			background: #000000;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin-right: 30rpx;
		}

		.info {
			flex: 1;
			height: 156rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			font-size: 26rpx;
			color: #999999;

			.title {
				font-weight: bold;
				font-size: 30rpx;
				color: #1A1A1A;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				/* 这里是超出几行省略 */
				overflow: hidden;
			}

			.price {
				font-weight: 500;
				font-size: 28rpx;
				color: #1A1A1A;
			}

		}
	}

	.more-btn {
		margin-top: 36rpx;
		display: flex;
		justify-content: end;
		font-weight: 400;
		font-size: 24rpx;
		color: #1A1A1A;

		.more {
			width: 166rpx;
		}

		display: flex;
		justify-content: end;
		flex: 1;

		>view {
			width: 120rpx;
			height: 66rpx;
			line-height: 66rpx;
			text-align: center;
			background: #F7F7F7;
			border-radius: 38rpx 38rpx 38rpx 38rpx;
			margin-left: 20rpx;
		}

		.shipping {
			color: #fff;
			background: linear-gradient(90deg, #6780FF 0%, #3A43FF 100%);
		}

	}

	.add-btn{
		position: fixed;
		bottom:180rpx;
		right:20rpx;
		button{
			background: linear-gradient( 90deg, #6780FF 0%, #3A43FF 100%);
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}
	}
</style>
